<template>
	<view class="container">
		<!-- 题目信息卡片 -->
		<view class="question-info-card">
			<view class="question-header">
				<view class="question-type">客观题</view>
				<view class="question-stats">
					<text class="stat-item">满分：2</text>
					<text class="stat-item">班级得分率：67%</text>
					<text class="stat-item">年级得分率：53%</text>
				</view>
			</view>
			
			<view class="question-number">12-17<text class="question-unit">题</text></view>
			
			<view class="upload-area">
				<view class="upload-placeholder">
					<text class="upload-text">等待上传原题</text>
				</view>
			</view>
		</view>

		<!-- 答题结果分析 -->
		<view class="analysis-section">
			<view class="section-title">答题结果分析</view>
			
			<view class="knowledge-point">
				<text class="knowledge-label">知识点：</text>
				<text class="knowledge-content">一元二次方程的解法</text>
			</view>
			
			<!-- 选项A -->
			<view class="option-section">
				<view class="option-header">
					<text class="option-label">A</text>
					<view class="option-stats">
						<text class="option-percentage">56%</text>
						<text class="option-count">/24人</text>
						<view class="dropdown-icon">⌄</view>
					</view>
				</view>
				<view class="progress-bar">
					<view class="progress-fill" style="width: 56%"></view>
				</view>
				
				<!-- 学生头像网格 -->
				<view class="student-grid">
					<view class="student-item" v-for="student in studentsA" :key="student.id">
						<view class="student-avatar">
							<view class="avatar-placeholder"></view>
						</view>
						<text class="student-name">{{ student.name }}</text>
					</view>
				</view>
			</view>

			<!-- 选项B -->
			<view class="option-section">
				<view class="option-header">
					<text class="option-label">B</text>
					<view class="option-stats">
						<text class="option-percentage">14%</text>
						<text class="option-count">/10人</text>
						<view class="dropdown-icon">⌄</view>
					</view>
				</view>
				<view class="progress-bar">
					<view class="progress-fill" style="width: 14%"></view>
				</view>
			</view>

			<!-- 选项C -->
			<view class="option-section">
				<view class="option-header">
					<text class="option-label">C</text>
					<view class="option-stats">
						<text class="option-percentage">24%</text>
						<text class="option-count">/19人</text>
						<view class="dropdown-icon">⌄</view>
					</view>
				</view>
				<view class="progress-bar">
					<view class="progress-fill" style="width: 24%"></view>
				</view>
			</view>

			<!-- 选项D -->
			<view class="option-section">
				<view class="option-header">
					<text class="option-label">D</text>
					<view class="option-stats">
						<text class="option-percentage">0%</text>
						<text class="option-count">/0人</text>
						<view class="dropdown-icon">⌄</view>
					</view>
				</view>
				<view class="progress-bar">
					<view class="progress-fill" style="width: 0%"></view>
				</view>
			</view>
		</view>

		<!-- 答案解析 -->
		<view class="solution-section">
			<view class="section-title">答案解析</view>
			<text class="solution-content">一元二次方程的解法</text>
		</view>

		<!-- 底部导航按钮 -->
		<view class="bottom-navigation">
			<button class="nav-btn prev-btn">上一题</button>
			<button class="nav-btn next-btn">下一题</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			studentsA: [
				{ id: 1, name: '汪小敏' },
				{ id: 2, name: '安可列' },
				{ id: 3, name: '许妮' },
				{ id: 4, name: '黄安' },
				{ id: 5, name: '刘鹤' },
				{ id: 6, name: '陈程' },
				{ id: 7, name: '迪力热巴' },
				{ id: 8, name: '蓝菲琳' },
				{ id: 9, name: '林子涵' },
				{ id: 10, name: '胡一菲' },
				{ id: 11, name: '彭瑾' },
				{ id: 12, name: '罗智文' },
				{ id: 13, name: '许珂玥' },
				{ id: 14, name: '林允儿' },
				{ id: 15, name: '陈辉' },
				{ id: 16, name: '汪小敏' },
				{ id: 17, name: '叶倩' },
				{ id: 18, name: '刘相遇' }
			]
		}
	},
	onLoad(options) {
		// 接收传递的参数
		console.log('作答详情页面参数:', options);
	},
	methods: {
		
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #e0e0e0;
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
	padding: 20rpx;
	padding-bottom: 120rpx;
}

// 题目信息卡片
.question-info-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.question-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;

		.question-type {
			background: @primary-color;
			color: @white;
			padding: 6rpx 12rpx;
			border-radius: 12rpx;
			font-size: 20rpx;
			font-weight: bold;
		}

		.question-stats {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 4rpx;

			.stat-item {
				font-size: 22rpx;
				color: @text-light;
			}
		}
	}

	.question-number {
		font-size: 48rpx;
		font-weight: bold;
		color: @text-color;
		margin-bottom: 20rpx;

		.question-unit {
			font-size: 32rpx;
			font-weight: normal;
		}
	}

	.upload-area {
		border: 2rpx dashed #ddd;
		border-radius: 12rpx;
		padding: 40rpx;
		text-align: center;
		background: #f9f9f9;

		.upload-placeholder {
			padding: 20rpx;

			.upload-text {
				color: @text-lighter;
				font-size: 24rpx;
			}
		}
	}
}

// 答题结果分析  
.analysis-section {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.knowledge-point {
	margin-bottom: 30rpx;
}

.knowledge-label {
	color: #4DD0E1;
	font-size: 24rpx;
	font-weight: bold;
}

.knowledge-content {
	color: #333;
	font-size: 24rpx;
}

.option-section {
	margin-bottom: 30rpx;
}

.option-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.option-label {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.option-stats {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.option-percentage {
	font-size: 28rpx;
	font-weight: bold;
	color: #4DD0E1;
}

.option-count {
	font-size: 24rpx;
	color: #666;
}

.dropdown-icon {
	font-size: 20rpx;
	color: #999;
}

.progress-bar {
	height: 8rpx;
	background: #f0f0f0;
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.progress-fill {
	height: 100%;
	background: #4DD0E1;
	border-radius: 4rpx;
	transition: width 0.3s;
}

/* 学生头像网格 */
.student-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.student-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.student-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	overflow: hidden;
}

.avatar-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #FFB74D, #FF8A65);
	border: 2rpx solid #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.student-name {
	font-size: 20rpx;
	color: #666;
	text-align: center;
}

/* 答案解析 */
.solution-section {
	background: white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
}

.solution-content {
	font-size: 24rpx;
	color: #666;
	line-height: 1.6;
}

/* 底部导航按钮 */
.bottom-navigation {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 20rpx;
	display: flex;
	gap: 20rpx;
	border-top: 1rpx solid #f0f0f0;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-btn {
	flex: 1;
	padding: 24rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
	font-weight: bold;
	border: none;
}

.prev-btn {
	background: #f5f5f5;
	color: #666;
}

.next-btn {
	background: #4DD0E1;
	color: white;
}
</style>
